<template>
  <!-- 缩略图组件相关 -->
  <div>
    <div class="chr-pos" v-if="miniShow">
      <img :src="relevantInfo.pcThumbnailUrl" class="chr-img" @click="openMet" alt="">
      <Icon type="ios-close-circle" class="close-icon" @click="closeSmall" />
    </div>
    <!-- 转盘 -->
    <rotary-table ref="rotaryRef" @activityInfo="activityInfo" :timesPropCount="timesCount"></rotary-table>
  </div>
</template>
<script>
import { mapState } from "vuex";
import rotaryTable from './rotary-table.vue'
import { eventBus } from '@/main'; // 引入全局事件总线
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';
import { listProcessingActivity, getUserDrawCount, userDraw, } from "@/api/user";
dayjs.extend(utc);
dayjs.extend(timezone);
export default {
  components: { rotaryTable },
  data() {
    return {
      miniShow: false,
      relevantInfo: {},
      timesCount: 0
      // activityEndDate: '2024-12-31' // 假设活动有效日期截止到2024-12-31，实际根据需求替换
    }
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  },
  watch: {
    '$route'() {
      this.activitiesInProgress();
    },
  },
  mounted() {
    this.activitiesInProgress();//查询进行中的活动
    eventBus.$on('showMet', (val) => {
      this.checkMiniThumbnailDisplay(val);
    });
  },
  methods: {
    openMet() {
      if (this.userInfo) {
        this.getUserTime(this.relevantInfo.id);//获取用户抽奖次数
      }
      this.miniShow = false;
      this.$refs.rotaryRef.open();
    },
    // 关闭小缩略图
    closeSmall() {
      this.miniShow = false;
      if (this.userInfo) {
        localStorage.setItem(`user_${this.userInfo.id}`, dayjs().set('hour', 23).set('minute', 59).set('second', 59).valueOf());// 记录关闭的人和当天的0点时间
      }
    },
    checkMiniThumbnailDisplay(rotaryStatus) {
      // 先判断路由是否是可显示的 缩略图在全部页面都会有显示，（除了订单、运单、包裹详情、推广联盟页面不显示）
      if (this.$route.path === '/user/order' || this.$route.path === '/user/warehouse' || this.$route.path === '/user/shipment' || this.$route.path === '/submit/parcel' || this.$route.path === '/transport/roam' || rotaryStatus) {
        this.miniShow = false;
      } else {
        // 获取当前用户关闭的时间戳
        const storedClosedTimeStr = localStorage.getItem(`user_${this.userInfo.id}`);
        const now = dayjs();
        if (storedClosedTimeStr) {
          const storedClosedTime = parseInt(storedClosedTimeStr, 10);
          const currentTimeStampInMs = dayjs().valueOf();
          if (currentTimeStampInMs >= storedClosedTime) {
            if (now.isAfter(this.relevantInfo.startTime) && now.isBefore(this.relevantInfo.endTime)) {
              if (this.$route.path !== '/user/order' && this.$route.path !== '/user/warehouse' && this.$route.path !== '/user/shipment' && this.$route.path !== '/submit/parcel' && this.$route.path !== '/transport/roam') {
                this.miniShow = true;
                localStorage.removeItem(`user_${this.userInfo.id}`)
              }
            } else {
              this.miniShow = false;
            }
          }
        } else {
          // 判断活动有效日期
          if (now.isAfter(this.relevantInfo.startTime) && now.isBefore(this.relevantInfo.endTime)) {
            if (this.$route.path !== '/user/order' && this.$route.path !== '/user/warehouse' && this.$route.path !== '/user/shipment' && this.$route.path !== '/submit/parcel' && this.$route.path !== '/transport/roam') {
              this.miniShow = true;
            }
          } else {
            this.miniShow = false;
          }
        }
      }
    },
    activityInfo(val) {
      // this.relevantInfo = val;
    },
    //查询进行中的活动
    activitiesInProgress() {
      listProcessingActivity().then((res) => {
        let data = res.result;//圣诞节
        data.forEach(item => {
          if (item.activityType === "WHEEL") {
            this.relevantInfo = item;//活动信息
            if (this.userInfo) {
              this.getUserTime(item.id);//获取用户抽奖次数
            }
            this.checkMiniThumbnailDisplay();
          }
        });
      })
    },
    // 获取用户抽奖次数
    getUserTime(activityId) {
      getUserDrawCount({ activityId: activityId }).then((res) => {
        this.timesCount = res.result;
      })
    },
  }
}
</script>
<style lang="less" scoped>
.chr-pos {
  position: fixed;
  left: 0;
  z-index: 200;
  bottom: 28px;

  .chr-img {
    width: 160px;
    cursor: pointer;
  }

  .close-icon {
    color: #676767;
    font-size: 24px;
    position: absolute;
    right: 12px;
    top: -4px;
    cursor: pointer;
  }
}
</style>